<script lang="ts" setup>
import type { TabsPaneContext } from "element-plus";
import {
  Recommend,
  SongList,
  RankingList,
  Singer,
  LatestMusic
} from "./components/index";

type TabsComponents = "recommend" | "songList" | "rankingList" | "singer" | "latestMusic";
const tabsComponents = {
  recommend: Recommend,
  songList: SongList,
  rankingList: RankingList,
  singer: Singer,
  latestMusic: LatestMusic
};
const curActiveTab = ref<TabsComponents>("recommend");
const componentId = computed(() => tabsComponents[curActiveTab.value]);

// tabs
const tabsList = [
  { label: "推荐", name: "recommend", componentId: Recommend },
  { label: "歌单", name: "songList", componentId: SongList },
  { label: "排行榜", name: "rankingList", componentId: RankingList },
  { label: "歌手", name: "singer", componentId: Singer },
  { label: "最新", name: "latestMusic", componentId: LatestMusic }
];

const handleTabsClick = (tab: TabsPaneContext) => {
  console.log("tab==>", tab);
};

function handleSwitchTab(tab: any) {
  if (curActiveTab.value == tab) return;
  curActiveTab.value = tab;
}

defineOptions({
  name: "Dashboard"
});
</script>

<template>
  <div class="container relative">
    <github-corner class="github-corner" title="Github" />
    <el-alert
      style="margin-bottom: 10px"
      :closable="false"
    />
    <div class="tabs">
      <el-tabs
        v-model="curActiveTab"
        class="demo-tabs"
        @tab-click="handleTabsClick"
      >
        <el-tab-pane
          v-for="item in tabsList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="componentId" @switchTab="handleSwitchTab" />
  </div>
</template>

<style lang="scss" scoped>
:deep(.tabs) {
  .el-tabs__item.is-active {
    font-size: 17px;
    font-weight: bold;
  }
}
.github-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  border: 0;
}
</style>
